<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style type="text/css">
        body{
            /*background: url(../img/bg1.jpg) no-repeat top center fixed;*/
            background-size: 100% auto;
        }
        .content{
            width: 1000px;
            height: 600px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        img{
            z-index: 1;
            width: 20%;
            height: auto;
            position: absolute;
            padding: 10px 10px 15px 10px;
            background: #ffffff;
            border: 1px solid #CCCCCC;
            /* 动画的时间 */
            -moz-transition: 0.5s;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }
        img:hover{
            z-index: 2;
            transform: scale(1.5);
            -moz-transform: scale(1.5) ;
            -webkit-transform: scale(1.5) ;
            box-shadow: -10px 10px 20px #000000;
            -moz-box-shadow: -10px 10px 20px #000000;
            -webkit-box-shadow: -10px 10px 20px #000000;
        }
        .pic1{
            left: 100px;
            top: 50px;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform: rotate(20deg);
        }
        .pic2{
            left: 280px;
            top: 60px;
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
        .pic3{
            left: 380px;
            top: 70px;
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
        .pic4{
             left: 480px;
             top: 80px;
             -webkit-transform: rotate(-10deg);
             -moz-transform: rotate(-10deg);
             transform: rotate(-10deg);
         }
        .pic5{
              left: 380px;
              top: 160px;
              -webkit-transform: rotate(-10deg);
              -moz-transform: rotate(-10deg);
              transform: rotate(-10deg);
          }
        .pic6{
               left: 580px;
               top: 90px;
               -webkit-transform: rotate(-10deg);
               -moz-transform: rotate(-10deg);
               transform: rotate(-10deg);
           }
        .pic7{
                left: 880px;
                top: 160px;
                -webkit-transform: rotate(-10deg);
                -moz-transform: rotate(-10deg);
                transform: rotate(-10deg);
            }
        /*   下面的代码大同小异就不依依展示了    */

    </style>
</head>
<body>
<div class="content">
    <img src="imgs/four/微信图片_20180504231152.jpg" class="pic1" height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311521.jpg" class="pic2" height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311522.jpg" class="pic3" height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311523.jpg" class="pic4" height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311524.jpg"  class="pic5" height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311525.jpg" class="pic6"  height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311526.jpg" class="pic7"  height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311527.jpg" class="pic8"  height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311528.jpg"  class="pic9" height="300" width="450"/>
    <img src="imgs/four/微信图片_201805042311529.jpg"  class="pic10" height="300" width="450"/>
</div>
</body>
</html>
